<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= title %></title>
    <link rel="stylesheet" href="/animate.min.css" />
  </head>
  <body>
    <script type="text/javascript" src="/wow.min.js"></script>
    <script type="text/javascript">
      new WOW({
        boxClass: 'wow', // default
        animateClass: 'animated', // default
        offset: 0, // default
        mobile: true, // default
        live: true, // default
      }).init();
    </script>
    <div id="app">
      <script>
        (() => {
          var htmlRoot = document.documentElement;
          var theme = window.localStorage.getItem('vueuse-color-scheme');
          if (htmlRoot && theme) {
            htmlRoot.classList.add(theme);
            theme = htmlRoot = null; //手动取消引用
          }
        })();
      </script>
      <style id="app-loading-style">
        html,
        body {
          margin: 0;
          padding: 0;
        }
        html.dark .app-loading {
          background-color: #2c344a !important;
        }

        html.dark .app-loading .app-loading-title {
          color: rgb(255 255 255 / 85%) !important;
        }

        .app-loading {
          display: flex;
          width: 100vw;
          height: 100vh;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          background-color: #f4f7f9;
          user-select: none;
        }

        .app-loading .app-loading-wrap {
          position: absolute;
          top: 50%;
          left: 50%;
          display: flex;
          transform: translate3d(-50%, -50%, 0);
          justify-content: center;
          align-items: center;
          flex-direction: column;
        }

        .app-loading .app-loading-title {
          display: flex;
          margin-top: 30px;
          font-size: 30px;
          color: rgb(0 0 0 / 85%);
          justify-content: center;
          align-items: center;
        }

        .app-loading .app-loading-logo {
          display: block;
          width: 85px;
          margin: 0 auto;
          margin-bottom: 40px;
        }

        .loading-container {
          animation: bounce 1s infinite;
        }

        .loading-img {
          width: 56px;
          height: 56px;
          animation: spin 1.6s linear infinite;
        }

        @keyframes spin {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }

        @keyframes bounce {
          0%,
          100% {
            transform: translateY(-25%);
            animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
          }
          50% {
            transform: translateY(0);
            animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
          }
        }

        @media (max-width: 1024px) {
          .app-loading .app-loading-title {
            font-size: 1rem;
            margin-top: 20px;
          }
          .app-loading .app-loading-logo {
            width: 50px;
            height: 50px;
            margin-bottom: 30px;
          }

          .loading-img {
            width: 40px;
            height: 40px;
          }
        }
      </style>
      <div class="app-loading" id="app-loading-div">
        <div class="app-loading-wrap">
          <img src="./src/assets/images/logo1.png" class="app-loading-logo" alt="Logo" />
          <div class="loading-container">
            <img src="./src/assets/images/logo.png" class="loading-img" alt="" />
          </div>
          <div class="app-loading-title"><%= title %></div>
        </div>
      </div>
    </div>

    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
